<template>
	<div
		class="app-control-portlet app-control-dashboard__item"
		:style="{ width, height }"
	>
		<div :class="{ 'control-container': true, 'app-control-portlet': true }">
			<p v-if="isShowTitle && title" class="control-header">
				<span class="control-header__caption">
					<template v-if="image">
						<i v-if="image.cssClass" :class="image.cssClass" />
						<img v-else-if="image.imagePath" :src="image?.imagePath" />
					</template>
					{{ titlePSLanguageRes ? $t(titlePSLanguageRes, title) : title }}
				</span>
				<span class="control-header__right">
					<span class="header__action">
						<a
							@click="
								($event) => {
									handleActionClick($event, item);
								}
							"
							v-for="item in actions"
							:key="item.name"
						>
							<template v-if="item.showIcon">
								<i v-if="item.iconClass" :class="item.iconClass" />
								<img v-else-if="item.imgPath" :src="item.imgPath" />
							</template>
							<span v-if="item.showCaption">{{ item.caption }}</span>
						</a>
					</span>
				</span>
			</p>
			<div
				:class="{
					'app-control-portlet__content': true,
					'app-control-portlet__content--no-title': !isShowTitle,
				}"
			>
				<slot></slot>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { IEvent } from '@/core';
import { portletProps } from './portlet';
const props = defineProps(portletProps);
interface ComponentEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<ComponentEmit>();
const handleActionClick = (event: any, item: any) => {
	emit('component-action', {
		name: props.name,
		action: 'portletAction',
		data: {
			event,
			logic: {
				name: item.logic.name,
				actionTag: item.logic.actionTag,
				actionDECodeName: item.logic.actionDECodeName,
				predefinedType: item.logic.predefinedType,
			},
		},
	});
};
</script>
